<template>
  <svg viewBox="4 4 40 40" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
      <polygon
        v-if="props.stepNum === '1'"
        :id="`${uId}_1`"
        points="28.1746248 44 35.2687585 4 27.8472033 4 14.1500682 10.9849932 12.7312415 19.7162347 23.9727149 14.0409277 18.73397 44"
      />
      <path
        v-if="props.stepNum === '2'"
        :id="`${uId}_2`"
        d="M36.2520107,44 L37.6997319,36.0643432 L23.3297587,36.0643432 L28.155496,31.7211796 C30.9436997,29.0759607 33.0705987,26.9579982 34.536193,25.3672922 C36.0017873,23.7765862 37.0831099,22.3467382 37.7801609,21.077748 C38.4772118,19.8087578 38.9687221,18.4593387 39.2546917,17.0294906 C39.3976765,16.028597 39.4691689,15.2600536 39.4691689,14.7238606 C39.4691689,12.7578195 39.0402145,10.9615728 38.1823056,9.33512064 C37.3243968,7.70866845 36.028597,6.41286863 34.2949062,5.44772118 C32.5612154,4.48257373 30.4432529,4 27.9410188,4 C24.8668454,4 22.0607685,4.81322609 19.5227882,6.43967828 C16.9848079,8.06613047 15.0008937,10.4164433 13.5710456,13.4906166 L13.5710456,13.4906166 L20.0053619,18.2091153 C21.792672,14.3485255 23.9731903,12.4182306 26.5469169,12.4182306 C27.6193029,12.4182306 28.432529,12.7220733 28.9865952,13.3297587 C29.5406613,13.9374441 29.8176944,14.7238606 29.8176944,15.689008 C29.8176944,16.6899017 29.6121537,17.5924933 29.2010724,18.3967828 C28.7899911,19.2010724 28.1733691,20.0321716 27.3512064,20.8900804 C26.5290438,21.7479893 25.2064343,23.0348525 23.383378,24.7506702 C22.2037534,25.8230563 21.5781948,26.3949955 21.5067024,26.4664879 L21.5067024,26.4664879 L9.49597855,38.0482574 L8.5308311,44 L36.2520107,44 Z"
      />
      <path
        v-if="props.stepNum === '3'"
        :id="`${uId}_3`"
        d="M22.5243742,44 C26.1783048,44 29.2964427,43.1743522 31.8787879,41.5230567 C34.4611331,39.8717611 36.0333773,37.3948177 36.5955204,34.0922266 C36.7360562,33.3895477 36.8063241,32.6341678 36.8063241,31.826087 C36.8063241,30.0342556 36.3935002,28.4707949 35.5678524,27.1357049 C34.7422047,25.8006148 33.5740009,24.7290294 32.0632411,23.9209486 C35.7874396,22.5155907 37.9481774,19.9508125 38.5454545,16.226614 C38.6508564,15.4888011 38.7035573,14.7861221 38.7035573,14.1185771 C38.7035573,12.1862099 38.2380325,10.455863 37.3069829,8.92753623 C36.3759332,7.39920949 35.0496267,6.19587176 33.3280632,5.31752306 C31.6064998,4.43917435 29.5862978,4 27.2674572,4 C24.3864734,4 21.6811594,4.71146245 19.1515152,6.13438735 C16.6218709,7.55731225 14.7070707,9.58629776 13.4071146,12.2213439 L13.4071146,12.2213439 L19.5731225,16.7009223 C20.3109354,15.1198946 21.2244181,13.9429073 22.3135705,13.1699605 C23.4027229,12.3970136 24.5797101,12.0105402 25.8445323,12.0105402 C26.9336847,12.0105402 27.7593325,12.3003953 28.3214756,12.8801054 C28.8836188,13.4598155 29.1646904,14.188845 29.1646904,15.0671937 C29.1646904,16.6130874 28.6201142,17.8252086 27.5309618,18.7035573 C26.4418094,19.581906 24.9134827,20.0210804 22.9459816,20.0210804 L22.9459816,20.0210804 L20.4690382,20.0210804 L19.1515152,27.2938076 L21.259552,27.2938076 C23.3675889,27.2938076 24.9574001,27.6363636 26.0289855,28.3214756 C27.1005709,29.0065876 27.6363636,29.9815547 27.6363636,31.2463768 C27.6363636,31.4571805 27.6012297,31.773386 27.5309618,32.1949934 C27.3201581,33.4949495 26.7580149,34.4611331 25.8445323,35.0935441 C24.9310496,35.7259552 23.8594642,36.0421607 22.629776,36.0421607 C21.0487484,36.0421607 19.7312253,35.541502 18.6772069,34.5401845 C17.6231884,33.5388669 17.0083443,32.1422925 16.8326746,30.3504611 L16.8326746,30.3504611 L9.29644269,33.8814229 C9.82345191,36.9732104 11.2375933,39.4325867 13.5388669,41.259552 C15.8401405,43.0865173 18.8353096,44 22.5243742,44 Z"
      />
    </defs>
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
      <g fill-rule="nonzero">
        <use :fill="props.fill" v-bind="{'xlink:href': `#${uId}_${props.stepNum}`}" :href="`#${uId}_${props.stepNum}`" />
      </g>
    </g>
  </svg>
</template>

<script setup lang="ts">
import { useId } from 'vue';

const props = defineProps<{
  stepNum: '1' | '2' | '3',
  fill: string
}>();

const uId = useId();
</script>
